<template>
	<view>
		<view>
			<yss-table class="yss-table" id="box" headerFixed :contents="contents" :columnFixed="1" :headers="headers"
				:totalRow="totalRow" @rowClick="rowClick" @scroll="handleScroll" @rowDrop="rowDrop">
			</yss-table>
		</view>
	</view>
</template>

<script>
import { ref } from "vue"

export default {
	setup() {
		const setupx2px = (value) => {
			//#ifndef MP-WEIXIN
			return uni.upx2px(value) + 'px'
			//#endif
			//#ifdef MP-WEIXIN
			return uni.upx2px(value)
			//#endif
		}
		const loading = ref(false);
		const totalRow = ref(['sales', 'orders', 'saleroom', 'sales_task_p', 'gross', 'test2']);
		const headers = ref([{
			label: '排名',
			key: 'rank',
			width: setupx2px(100)
		}, {
			label: '姓名',
			key: 'name',
			width: setupx2px(150)
		}, {
			label: '部门',
			key: 'dept',
			width: setupx2px(200)
		}, {
			label: '销量',
			key: 'sales',
			width: setupx2px(200),
			sort: true
		}, {
			label: '销量完成率',
			key: 'sales_task_p',
			width: setupx2px(230),
			sort: true,
			format: {
				type: 'progress',
				keys: ['sales', 'sales_task'],
				template: '{0}/{1}*100'
			}
		}, {
			label: '订单',
			key: 'orders',
			width: setupx2px(230),
			sort: true
		}, {
			label: '销售额',
			key: 'saleroom',
			width: setupx2px(200),
			sort: true
		}, {
			label: '毛利',
			key: 'gross',
			width: setupx2px(200),
			sort: true
		}, {
			label: 'string格式化',
			key: 'test1',
			width: setupx2px(240),
			format: {
				type: 'string',
				keys: ['name', 'dept'],
				template: '{0}--{1}'
			}
		}, {
			label: '计算格式化',
			key: 'test2',
			width: setupx2px(240),
			sort: true,
			format: {
				type: 'compute',
				keys: ['orders', 'sales'],
				template: '{0}*{1}'
			}
		}, {
			label: 'html普通格式化',
			key: 'test3',
			width: setupx2px(250),
			format: {
				type: 'html',
				keys: ['name', 'dept'],
				template: '<span><h1>{0}</h1>{1}</span>'
			}
		}, {
			label: 'html条件格式化',
			key: 'test4',
			width: setupx2px(250),
			format: {
				type: 'html',
				keys: ['orders'],
				template: function (e) {
					if (e[0] > 1) {
						return '<p style="color:red">' + e[0] + '</p>'
					} else return '<p style="color:green">' + e[0] + '</p>'
				}
			}
		}]);
		const contents = ref([{
			"rank": 1,
			"id": 10000,
			"name": "小强",
			"dept": "IT部门",
			"sales": 26,
			'sales_task': 100,
			"orders": 2,
			"saleroom": 2050000,
			"gross": 240002
		},
		{
			"rank": 2,
			"id": 10002,
			"name": "小李",
			"dept": "销售1部",
			"sales": 25,
			'sales_task': 100,
			"orders": 2,
			"saleroom": 1530000,
			"gross": 232001
		},
		{
			"rank": 3,
			"id": 10004,
			"name": "小明",
			"dept": "销售部",
			"sales": 50,
			'sales_task': 120,
			"orders": 2,
			"saleroom": 1200000,
			"gross": 130000
		},
		{
			"rank": 4,
			"id": 10001,
			"name": "老张",
			"dept": "设计部",
			"sales": 43,
			'sales_task': 120,
			"orders": 1,
			"saleroom": 1100000,
			"gross": 80001
		},
		{
			"rank": 5,
			"id": 10003,
			"name": "小红",
			"dept": "研发部",
			"sales": 19,
			'sales_task': 80,
			"orders": 1,
			"saleroom": 200000,
			"gross": 23334
		},
		{
			"rank": 5,
			"id": 10003,
			"name": "小康",
			"dept": "销售2部",
			"sales": 19,
			'sales_task': 80,
			"orders": 1,
			"saleroom": 200000,
			"gross": 23334
		},
		{
			"rank": 6,
			"id": 10003,
			"name": "小二",
			"dept": "销售3部",
			"sales": 19,
			'sales_task': 80,
			"orders": 1,
			"saleroom": 200000,
			"gross": 23334
		},
		{
			"rank": 7,
			"id": 10003,
			"name": "小欧",
			"dept": "销售4部",
			"sales": 19,
			'sales_task': 80,
			"orders": 1,
			"saleroom": 200000,
			"gross": 23334
		},
		{
			"rank": 8,
			"id": 10003,
			"name": "小六",
			"dept": "销售5部",
			"sales": 19,
			'sales_task': 80,
			"orders": 1,
			"saleroom": 200000,
			"gross": 23334
		},
		{
			"rank": 9,
			"id": 10003,
			"name": "逍遥",
			"dept": "销售6部",
			"sales": 19,
			'sales_task': 80,
			"orders": 1,
			"saleroom": 200000,
			"gross": 23334
		},
		{
			"rank": 10,
			"id": 10003,
			"name": "佩奇",
			"dept": "销售9部",
			"sales": 19,
			'sales_task': 80,
			"orders": 1,
			"saleroom": 200000,
			"gross": 23334
		}
		]);
		// methods

		const rowClick = (e) => {
			console.log(e)
		}
		const rowDrop = (e) => {
			console.log(e)
		}
		let scrollLeft = 0;
		const handleScroll = () => {
			let box = document.getElementById('box');
			let clientHeight = box.clientHeight
			let scrollTop = box.scrollTop
			let scrollHeight = box.scrollHeight
			if (scrollLeft != box.scrollLeft) {
				scrollLeft = box.scrollLeft
			} else {
				if (clientHeight + scrollTop == scrollHeight) {
					alert("到底了")
				}
			}
		}
		return {
			loading,
			totalRow,
			headers,
			contents,
			setupx2px,
			rowClick,
			handleScroll,
			rowDrop
		}
	}
}
</script>

<style lang="scss" scoped>
.yss-table {
	height: 38rem;
	overflow: scroll;
}
</style>